<template>
  <el-form ref='setting_form' :model="columnMap" label-position="right" label-width="110px" size="mini">
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('column.setting')">
        <el-collapse v-model="active">
          <el-collapse-item name="table">
            <template slot="title">
              <a><i class="el-icon-s-operation"></i> {{ $t('table.table') }}</a>
            </template>
            <el-row>
              <el-col :span="6">
                <el-form-item :label="$t('table.stripe')">
                  <el-switch v-model="columnMap.options.stripe"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('table.border')">
                  <el-switch v-model="columnMap.options.border"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('table.export')">
                  <el-switch v-model="columnMap.pageOptions.export"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('table.compact')">
                  <el-switch v-model="columnMap.pageOptions.compact"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item  name="form">
            <template slot="title">
              <a><i class="el-icon-tickets"></i> {{ $t('table.form') }}</a>
            </template>
            <el-row>
              <el-col :span="6">
                <el-form-item :label="$t('form.openWith')">
                  <el-select v-model="columnMap.formOptions.type">
                    <el-option key="dialog" value="dialog" :label="$t('form.dialog')"></el-option>
                    <el-option key="drawer" value="drawer" :label="$t('form.drawer')"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
<!--              <el-col :span="6">-->
<!--                <el-form-item :label="$t('column.search')">-->
<!--                  <el-switch v-model="columnMap.search"></el-switch>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane :label="$t('column.columnConfiguration')">
        <el-collapse v-model="activeName" accordion>
          <template v-for="(column, index) in columnMap.columns">
            <el-collapse-item :title="column.title" :name="index">
                <v-column :column="column"></v-column>
            </el-collapse-item>
          </template>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>

import {DefaultColumnMap} from "@/config/column";
import VColumn from './column'

export default {
  name: "setting",
  components: {VColumn},
  props: {
    columnMap: {
      type: Object,
      default: () => ({...DefaultColumnMap, columns: []})
    }
  },
  computed: {
    // ...mapState('superstore/menudesigner', [
    //   'active'
    // ])
  },

  data: () => {
    return {activeName: 0, active: 'table'};
  },
  created() {
    // console.log(this.columnMap)
  },
  methods: {}
}
</script>

<style scoped>
</style>
